<template>
  <div class="Chief-One content-h-auto" chief-style-set>
    <div class="One-Left">
      <div class="rightTop">项目概况</div>
    </div>
    <div class="One-Right">
      <div class="right-item" v-for="(item,index) in DataList" :key="item.title">
        <div class="right-item-title">{{item.title}} :</div>
        <div class="right-item-content" :title='index === 3 ? item.value : ""'>{{item.value || ''}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { rptVisPrjbasic } from "@/api/portalChief";
export default {
  name: "Chief-One",
  data () {
    return {
      DataList: []
    };
  },
  created () {
    this.DataList = [];
    rptVisPrjbasic(this.$store.state.user.project.projectNo).then(res => {
      this.disposeData(res);
    });
  },
  methods: {
    // eslint-disable-next-line valid-jsdoc
    /**
    * 方法描述描述
    * @param {Object} res 参数作用
    */
    disposeData (res) {
      if (res.status === 200) {
        let data = res.data.data;
        Object.keys(data).forEach(item => {
          this.DataList.push({
            title: item,
            value: data[item]
          });
        });
      }
    }
  }
};
</script>

<style lang='less'>
.Chief-One{
  top: .5vw !important;
  >div{
    width: auto;
    display: inline-block;
  }
  .One-Left{
    width: 20%;
    height: 100%;
    border-right: 1px dashed #999999;
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    background: url('../../../../../assets/ChiefImg/xmgk.png') no-repeat;
    background-position: 50% 30%;
    font-weight: bold;
    .color();

    .rightTop{
      text-align: center;
      padding-bottom: 1.5vh;
    }
  }
  .One-Right{
    vertical-align: top;
    height: 100%;
    width: 80%;
    padding-left: 1vw;
    .right-item{
      padding: 1vh 0;
      display: flex;
      .right-item-title{
        width: 20%;
      }
      .right-item-content{
        width:80%;
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 16px;
      }
    }
  }
}
</style>